@import "base.css";
@import "grid.less";
@import "ui.less";

#app {
  display: flex;


  //菜单展开
  .menuOpen {
    width: 240px;
    transition: width var(--animationSpeed);
  }

  //菜单收起
  .menuStow {
    width: 48px;
    transition: width var(--animationSpeed);
    //收起，隐藏文字、arrow
    .menu {
      .text, .arrow {
        display: none !important;
      }
    }

    .icon {
      width: 2em !important;
    }

    .x-menu-child-box {
      display: none !important;
    }
  }

  .menu {
    height: 100vh;
    overflow: auto;
    width: 100%;
    flex-shrink: 0;
    min-height: 100vh;
    background-color: rgb(var(--theme-menu));

    .logo {
      height: var(--header-height);
      overflow: hidden;
    }

    //一级菜单
    .x-menu-main {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      padding: 0 0.75em;
      align-items: center;
      overflow: hidden;
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
      height: 45px;

      .icon, .text, .arrow {
        color: var(--gray-5)
      }

      .icon {
        width: 1.38em;
        font-size: 1.2em;
        flex-shrink: 0;
        transition: width var(--animationSpeed);
      }

      .text {
        width: 100%;
      }

      .arrow {
        width: 20px;
        flex-shrink: 0;
        transition: all var(--animationSpeed);

        i {
          font-size: 1.2em
        }
      }

      &:hover:not(.child) {
        .icon, .text {
          color: var(--gray-3)
        }

        .arrow i {
          color: var(--gray-3)
        }
      }
    }

    //子级菜单
    .x-menu-child-box {
      overflow: hidden;
      background-color: var(--theme-menu-child);
      //菜单展开/收起速度
      transition: max-height .3s;
    }

    //arrow 展开状态，
    .active .arrow {
      transform: rotate(90deg);
    }


  }

  .main {
    width: 100%;
    min-height: 100%;
    transition: width var(--animationSpeed);

    .header {
      .control {
        i.iconBtn {
          font-size: 1.4em;
          height: 100%;
          display: inline-block;
          line-height: 100%;
          padding: 0 0.5em;
          cursor: pointer;
          transition: all .32s;

          &:hover {
            background-color: var(--gray-2);
          }

          &::before {
            line-height: var(--header-height);
          }
        }
      }

      .control {
        height: var(--header-height);
        box-sizing: border-box;
        border-bottom: 1px solid var(--gray-2);
        display: flex;
        justify-content: space-between;
        //Header 右侧功能按钮
        .action {
          display: flex;
          align-items: center;

          .user {
            height: 100%;
            line-height: 100%;
            display: flex;
            align-items: center;
            cursor: default;

            &:hover {
              background-color: var(--gray-2);
            }

            .iconfont {
              padding: 0 6px 0 10px;
              font-size: 1.4em;
            }

            & > span {
              font-size: 0.9em;
              color: var(--theme-text);
              margin-right: 1em;
            }

            &.dropdown {
              li {
                i {
                  display: inline-block;
                  color: var(--theme-color);
                  font-size: 1.14em;
                }
                color: var(--theme-color);
                display: block;
                padding: 0.5em 1em;
                transition: 280ms all 120ms ease-out;
                outline: none;
                text-decoration: none;
                font-size: 1em;

                &:hover {
                  outline: none;
                  background-color: rgba(rebeccapurple, 0.15);
                }
                &:focus {
                  outline: none;
                  background-color: rgba(rebeccapurple, 0.25);
                }
              }
            }
          }
        }

        //面包屑
        .breadLink {
          width: 100%;
          line-height: var(--header-height);
          font-size: 0.85em;
          color: var(--gray-8);
          font-weight: 500;
        }
      }

      .pageTab {
        height: var(--header-tab-height);
        overflow: hidden;
        box-sizing: border-box;
        display: flex;

        border-bottom: 1px solid var(--gray-2);

        .item {
          &:first-child {
            i {
              display: none
            }
          }

          &:hover {
            color: var(--theme-color);

            i {
              color: var(--theme-color);
            }
          }

          display: inline-block;
          border-right: 1px solid var(--gray-3);
          color: var(--gray-8);
          padding: 0 1em;
          font-size: 0.9em;
          line-height: var(--header-tab-height);
          cursor: pointer;

          i {
            font-size: 11px;
            color: var(--gray-4);

            &:hover {
              color: #f40;
              font-weight: 700;
            }
          }

          &.active {
            background-color: var(--theme-color);
            color: #fff;

            i {
              color: #fff;
            }
          }
        }
      }
    }

    //页面tab，右键菜单
    .pageTabMenu {
      display: none;
      position: absolute;
    }

    .page {
      height: calc(100vh - var(--header-height) - var(--header-tab-height));
      overflow: auto;
      background-color: var(--gray-2);

      .box {
        display: none;
        height: 100%;
        max-height: 100%;
        overflow: auto;

        &.active {
          display: block !important;
        }
      }
    }
  }
}
